<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>Qing's 前端实验室</title>
	<link rel="stylesheet" type="text/css" href="css/vui.css"/>
	<style type="text/css">
		
	</style>
  </head>
  <body>
	<footer class="navtab" id="navtab">
  		<a href="javascript:;" data-indx="1" class="nav active">
			<span>home</span>
		</a>
		<a href="javascript:;" data-indx="2" class="nav">
			<span>vue</span>
		</a>
		<a href="javascript:;" data-indx="3" class="nav">
			<span>AppShell</span>
		</a>
		<a href="javascript:;" data-indx="4" class="nav">
			<span>FullPage</span>
		</a>
		<a href="javascript:;" data-indx="5" class="nav">
			<span>双向数据绑定</span>
		</a>
	</footer>
	<div class="page">
		<iframe src="./home.html?index=1" id="frame" name="index" width="100%" height="100%"></iframe>
	</div>
	<!-- <script type="text/javascript" src="js/vue.min.js"></script> -->
	<script type="text/javascript" src="js/vui.js"></script>
	<script type="text/javascript">
// 		if('serviceWorker' in navigator) {
// 			window.addEventListener('load', function() {
// 				navigator.serviceWorker.register('./sw.js')
// 					.then(function(reg) {
// 						console.log('ServiceWorker register successful!');
// 					})
// 					.catch(function(err) {
// 						console.log('ServiceWorker register failed!');
// 					});
// 			});
// 		}
		window.onload = function() {
			vui(window);
			
			var hrefs = ['home', 'vue', 'appshell', 'fullpage', 'mvvm'];
			_switchTab();
			
			function _switchTab() {
				var navtab = v.getdom('#navtab');
				navtab.children[0].classList.add('active');
				v.addEvt(navtab, 'click', function(e) {
					e.preventDefault();
					var i, navList=navtab.children, l = navList.length;
					var index = e.target.parentNode.getAttribute('data-indx');
					var cont = v.getdom('#frame'), href;
					if(index) {
						href = './' + hrefs[index - 1] + '.html?index=' + index;
					}
					if(href) {
						cont.src = href;
						for(var i=0; i<l; i++) {
							navList[i].classList.remove('active');
						}
						e.target.parentNode.classList.add('active')
					}
				});
			}
		}
	</script>
  </body>
</html>
